<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="./lib/indexA.css">
    <link rel="stylesheet" href="./lib/indexB.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body{
            margin: 0;
        }
        [v-cloak]{
        display: none;
        }
    </style>
</head>
<body>
    <div id="app" class="app-style" v-cloak>
        <div class="top-style">
            <div>
                <img class="top-logo" src="./lib/index.jpg" alt="">
            </div>
            <div>
                <ul class="top-logo-ul">
                   
                    <li  v-for="(item,k) in tabName"  @click="tabNameClick(k)">
                      <span v-show="item.isShwo">{{item.name}}</span> 
                    </li>
                </ul>
            </div>
        </div>
        <!-- 页面A -->
            <div class="mid-style" v-show="isShowNumber==0">
                <div class="mid-style-left">
                    <div>
                        <span>字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字字</span>
                    </div>
                    <div class="mid-img-left">

                    </div>
                </div>
                <div class="mid-style-right">
                    <div class="mid-login-style">
                        <div>
                            <span  class="login-word-style" @click="userBtn(0)">登录</span>
                            <span  class="login-word-style" @click="userBtn(1)">注册</span>
                        </div>
                        <div class="login-style-user">
                                <div>
                                    <span>用户名</span>
                                    <br>
                                    <input class="input-style-user" v-model="form.username" type="text">
                                </div>
                                <div>
                                    <span>密码</span>
                                    <br>
                                    <input class="input-style-user"  v-model="form.password" type="password">
                                </div>
                                <div v-show="userNumber==1">
                                    <span>确认密码</span>
                                    <br>
                                    <input class="input-style-user" v-model="form.againWord" type="password">
                                </div>
                        </div>
                        <div class="login-style-btn">
                            <div class="login-style-login-word" v-show="userNumber==0" @click="login">登录</div>
                            <div class="login-style-login-word" v-show="userNumber==1" @click="regist">注册</div>
                        </div>
                    </div>
                </div>
             </div>
            <div class="mid-style" v-show="isShowNumber==1" style="background-color: aqua;">
                    <div class="mid-out-b">
                        <div class="mid-style-b-left">
                            <div style="width: 200px;margin:0 auto;padding-top:50px;">
                                    <div style="margin-left:20px;">
                                            <span  class="login-word-style" @click="midaClick('A')">分页a</span>
                                            <span  class="login-word-style" @click="midaClick('B')">分页b</span>
                                    </div>
                                    <!-- 分页a --> 
                                    <div class="login-style-user"  v-show="midClickName=='A'">
                                            <div>
                                                <span>下拉选项a</span>
                                                <br>
                                                <select name="" v-model="searchForm.roleId" id="" class="input-style-user b-class-word" >
                                                    <option :value ="i" v-for="i in roleId">{{i}}</option>
                                                </select>
                                                
                                            </div>
                                            <div>
                                                <span>下拉选项b</span>
                                                <br>
                                                <select v-model="searchForm.param" name="" id="" class="input-style-user b-class-word" >
                                                        <option v-for="i in valueList" :value ="i[0]">{{i[1]}}</option>
                                                </select>
                                            </div>
                                            <div >
                                                <span>数量</span>
                                                <br>
                                                <input  v-model="searchForm.value" class="input-style-user"  type="text">
                                            </div>
                                        <div >
                                                <div class="login-style-login-word b-style-sub" @click="commit">提交</div>
                                               
                                        </div>
                                    </div>
                                    <!-- 分页b -->
                                    <div class="login-style-user" v-show="midClickName=='B'">
                                            <div>
                                                <span>下拉选项a</span>
                                                <br>
                                                <select name="" id="" v-model="searchData.roleId" class="input-style-user b-class-word" >
                                                        <option :value ="i" v-for="i in roleId">{{i}}</option>
                                                </select>
                                                
                                            </div>
                                            <div style="width: 200px;">
                                                <span>搜索关键词</span>
                                                <br>
                                                <input v-model="searchData.keyword" class="input-style-user"  type="text" style="width:130px;">
                                                <span class="mid-style-search-b" @click="midaClick('B')">搜索</span>
                                            </div>
                                            <div >
                                                <span>数量</span>
                                                <br>
                                                <input v-model="searchData.value" class="input-style-user"  type="text">
                                            </div>
                                        <div >
                                                <div class="login-style-login-word b-style-sub" @click="commitDataButton">提交</div>
                                               
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 分页B 右边部分 -->
                            <div style="width: 400px;">
                                    <div class="mid-style-b-right" v-show="midClickName=='B'">
                                            <div >
                                                <div class="b-style-p" v-for="(i,k) in rightList" :style="k==nowKey?'background-color:red':'background-color:burlywood'"  @click="leftDataBtn(i[0],k)">
                                                    <div class="b-style-div-word">
                                                        <span>{{i[0]}}</span>
                                                    </div>
                                                    <div  class="b-style-div-word">
                                                        <span>{{i[1]}}</span>
                                                    </div>
                                                    <div  class="b-style-div-word">
                                                        <span>{{i[2]}}</span>
                                                    </div>
                                                    <div  class="b-style-div-word">
                                                        <span>{{i[3]}}</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                            </div>
                            
                    </div>
            </div>
            <div class="mid-style" v-show="isShowNumber==2">
                c
            </div>
            <div class="mid-style" v-show="isShowNumber==3">
                d
            </div>
    </div>
    <!-- vue.js的引入 -->
    <script src="./utils/cookie.js"></script>
    <script src="./lib/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- axios封装的ajax请求 -->
    <script src="./lib/axios.min.js"></script>
    <!-- 自定义请求设置 -->
    <script src="./lib/httpConfig.js"></script>
    
    <script>
        var app = new Vue({
            el: '#app',
            components:{
            },
            data: {
                tabName:[{name:"页面a",isShwo:true,},{name:"页面b",isShwo:false},{name:"页面c",isShwo:false},{name:"页面d",isShwo:false}],
                isShowNumber:0,
                userNumber:0,
                midClickName:"A",
                form:{
                    username:"abcd",
                    password:"defg",
                    againWord:"",
                    func:"account_reg"
                },
                searchForm:{
                    value:"",
                    param:"",
                    roleId:"",
                    func:"",
                    token:""
                },
                searchData:{
                    func:"",
                    token:"",
                    keyword:"",
                    roleId:"",
                    value:""
                },
                token:getCookie("userToken"),
                roleId:getCookie("roleId").split(','),
                valueList:[],
                rightList:[],
                nowKey:0,
            },
            watch:{
                token(value){
                    if(value){
                        this.tabName.forEach((e,index)=>{
                            e.isShwo = true
                            })
                    }
                }
            },
            mounted(){
                let width = document.body.clientWidth
                if(width<756){
                    window.open ('./page/phoneIndex.html',"_self")
                }
                    //  this.tabName.forEach((e,index)=>{
                    //      e.isShwo = true
                    // })
                if(getCookie("userToken")){
                    this.tabName.forEach((e,index)=>{
                         e.isShwo = true
                    })
                }
               
                
            },
            methods:{
                tabNameClick(value){
                    this.isShowNumber = value
                    if(value == 1){
                       this.selectChange()
                    }
                },
                userBtn(value){
                   this.userNumber = value
                },
                login(){
                    this.form.func = "account_login"
                    if(this.form.username==""){
                        this.$message(`请输入用户名！`);
                        return
                    }
                    if(this.form.password==""){
                        this.$message(`请输入密码！`);
                        return
                    }
                    axios.get("/function.php",{params:this.form}).then(res=>{
                        this.$message(`${res.data.message}`);
                        setCookie("userToken",res.data.token,1)
                        setCookie("roleId",res.data.roleId,1)
                        this.token = res.data.token
                        this.roleId = res.data.roleId
                        this.isShowNumber = 1
                        // location.reload() 
                    })
                    .catch(()=>{
                        this.$message(`登录失败`);
                    })
                },
                regist(){
                    if(this.form.username==""){
                        this.$message(`请输入用户名！`);
                        return
                    }
                    if(this.form.password==""){
                        this.$message(`请输入密码！`);
                        return
                    }
                    if(this.form.againWord!=this.form.password){
                        this.$message(`两次密码不一致！`);
                        return
                    }
                    this.form.func = "account_reg"
                    axios.get("/function.php",{params:this.form}).then(res=>{
                        this.$message(`${res.data.message}`);
                    })
                    .catch(()=>{
                        
                    })
                },
                // 第一个选项事件
                selectChange(){
                    this.searchData.token = this.token
                    this.searchData.func = "charge_list"
                    axios.get("/function.php",{params:this.searchData}).then(res=>{
                        this.$message(`${res.data.message}`);
                        this.valueList = res.data.list
                        
                    })
                    .catch(()=>{
                        
                    })
                },
                // 第一个提交事件
                commit(){
                    this.searchForm.token = this.token
                    this.searchForm.func = "charge_submit"
                    axios.get("/function.php",{params:this.searchForm}).then(res=>{
                        this.$message(`${res.data.message}`);
                        
                        
                    })
                    .catch(()=>{
                        
                    })
                },
                commitDataButton(){
                    let data = {
                        func:"item_submit",
                        token:this.token,
                        roleId:this.searchData.roleId,
                        param:this.searchData.param,
                        value:this.searchData.value
                    }
                    axios.get("/function.php",{params:data}).then(res=>{
                        this.$message(`${res.data.message}`);
                        
                        
                    })
                    .catch(()=>{
                        
                    })
                },
                midaClick(value){
                    this.midClickName = value
                    if(value=="B"){
                        let data = {func:"item_list",token:this.token,keyword:this.searchData.keyword}
                        axios.get("/function.php",{params:data}).then(res=>{
                        this.rightList = res.data.list
                        
                        })
                    }
                },
                leftDataBtn(value,index){
                    this.nowKey = index
                    this.searchData.param = value
                }
            }
        })
        
    
    </script>
</body>
</html>